<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
		<title>打卡</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/share2.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		.content::-webkit-scrollbar {
			display: none;
		}
		
		[v-cloak] {
			display: none;
		}
		
		.btn {
			width: 80%;
			height: 2rem;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 0.7rem;
			background-color: white;
			border-radius: 1rem;
			margin: 0 auto;
			color: rgba(158, 112, 25, 0.91);
		}
	</style>

	<body>
		<div class="main" id="content" v-cloak>
			<img src="img/32@2x.png" v-if="course_type == 3 || course_type == 4 || course_type == 9 || course_type == 6" width="100%" height="100%" class="background" />
			<img src="img/35@2x.png" v-if="course_type == 8 || course_type == 'null' || course_type == 5 || course_type == 2 || course_type == 7 || course_type == 1" width="100%" height="100%" class="background" />
			<div class="content">
				<div class="content_top" v-cloak>
					<p v-if="lists.sentence.sentence_name" v-if="lists.sentence.sentence_name">{{lists.sentence.sentence_name}}</p>
					<p v-if="lists.sentence.sentence_content">{{lists.sentence.sentence_content}}</p>
				</div>
				<div>
					<div class="middle">
						<div class="middle_top">
							<div>
								<img class="headImg" :src="lists.head_img" crossOrigin="anonymous" />
							</div>
							<p class="aa">
								<label>{{lists.nick_name}}</label>在《淘气包中西文俱乐部》 闯关成功，共{{allNum}}题，答对{{lists.success}}题
								<span v-if="paper_id == 1">，</span>
								<span v-if="paper_id == 1 && lists.success <= 5">推荐您去YCT1</span>
								<span v-if="paper_id == 1 && lists.success < 5 && lists.success >= 10">推荐您去YCT2</span>
								<span v-if="paper_id == 1 && lists.success < 10 && lists.success >= 20">推荐您去yct3-hsk2</span>
								<span v-if="paper_id == 1 && lists.success > 20">推荐您去HSK3</span>
							</p>
						</div>

						<div class="middle_bottom">
							<div>
								<p>打卡次数</p>
								<span><span class="num">{{lists.share_num}}</span>次</span>
							</div>
							<div>
								<p>学习时长</p>
								<span>{{lists.study_time}}</span>
							</div>
							<div>
								<img src="img/33@2x.png" />
							</div>
						</div>
					</div>
					<div class="content_bottom">
						<div @click="toImg">
							<img src="img/tq.png" style="width: 7rem;2.15rem;margin-left: 0.5rem;" />
							<span class="btnText">保存到相册，分享朋友圈<img src="img/34@2x.png" alt="" /></span>
						</div>
						<div>
							<img src="img/qrcode_for_gh_e3bb76af33fd_344.jpg" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jweixin-1.4.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/html2canvas.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		getOpenId();
		var data = {
			lists: "", //获取数据
			answerNo: GetQueryString('answerno'), //所属批次
			paper_id: GetQueryString('paperid'), //paperid
			course_type: GetQueryString("course_type"), //课程类别 1淘淘拼音 2YCT 3HSK 4西语发音 5少儿西语 6DELE 7淘转课堂
			goUrl: '',
			allNum: 0, //题目总数
			imgUri: '',
			wxData: {
				appId: '',
				timestamp: '',
				nonceStr: '',
				signature: '',
			} //微信参数
		}
		var app = new Vue({
			el: '#content',
			data: data,
			methods: {
				init: function() {
					var self = this;
					self.getList();
				},
				getList: function(index) {
					var self = this;
					$.ajax({
						url: apiPath + 'course/get-share-info',
						type: 'post',
						dataType: 'json',
						data: {
							open_id: open_id,
							paper_id: self.paper_id,
							url: document.location.href,
							answer_no: self.answerNo,
							flagsign: 1
						},
						success: function(data) {
							var image = new Image();
							image.src = data.returnData.head_img;
							image.onload = function() {
								data.returnData.head_img = getBase64Image(image);
							}
							self.lists = data.returnData;
							self.allNum = eval(parseInt(self.lists.success) + parseInt(self.lists.fail));
							self.goUrl = encodeURI(encodeURI(path + 'share22.html?paper_id=' + '&course_type=' + self.course_type + self.paper_id + '&nick_name=' + self.lists.nick_name + '&success=' + self.lists.success + '&fail=' + self.lists.fail + '&time=' + self.lists.study_time + '&head_img=' + self.lists.head_img + '&sentence=' + self.lists.sentence.sentence_name + '&sentencec=' + self.lists.sentence.sentence_content + '&num=' + (eval(self.lists.share_num) + 1)))
							self.getWx();
						}
					})
				},
				getWx: function() {
					var self = this;
					$.ajax({
						url: apiPath + 'test/get-jssdk',
						type: 'post',
						dataType: 'json',
						data: {
							open_id: open_id,
							url: document.location.href,
							flagsign: 1
						},
						success: function(data) {
							self.wxData.appId = data.returnData.appId;
							self.wxData.timestamp = data.returnData.timestamp;
							self.wxData.nonceStr = data.returnData.nonceStr;
							self.wxData.signature = data.returnData.signature;
							wx.config({
								debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
								appId: self.wxData.appId, // 必填，公众号的唯一标识
								timestamp: self.wxData.timestamp, // 必填，生成签名的时间戳
								nonceStr: self.wxData.nonceStr, // 必填，生成签名的随机串
								signature: self.wxData.signature, // 必填，签名，见附录1
								jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
							});
							wx.ready(function() { //需在用户可能点击分享按钮前就先调用
								wx.onMenuShareTimeline({
									title: '淘气包中西文俱乐部学习打卡第' + (eval(self.lists.share_num) + 1) + '次:' + self.lists.sentence.sentence_name, // 分享标题
									link: self.goUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
									imgUrl: path + 'img/33@2x.png', // 分享图标
									success: function() {
										// 用户点击了分享后执行的回调函数
										self.share();
									},
								})
								wx.onMenuShareAppMessage({
									title: '淘气包中西文俱乐部', // 分享标题
									desc: '淘气包中西文俱乐部学习打卡第' + (eval(self.lists.share_num) + 1) + '次:' + self.lists.sentence.sentence_name, // 分享描述
									link: self.goUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
									imgUrl: path + 'img/33@2x.png', // 分享图标
									type: '', // 分享类型,music、video或link，不填默认为link
									dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
									success: function() {
										// 用户点击了分享后执行的回调函数
										self.share();
									}
								});
							})
						}
					})
				},
				share: function() {
					var self = this;
					$.ajax({
						url: apiPath + 'user/add-share',
						type: 'post',
						dataType: 'json',
						data: {
							open_id: open_id,
							flagsign: 1
						},
						success: function(data) {}
					})
				},
				toImg: function() {
					var self = this;
					self.share();
					$(".num").text(eval($(".num").text()) + 1);
					$(".btnText").text('识别二维码，关注淘气包');
					html2canvas($("#content")[0], {
						useCORS: true,
						logging: true
					}).then(function(canvas) {
						var imgUri = canvas.toDataURL();
						self.imgUri = imgUri;
						$("#content").html('<img src="' + imgUri + '" style="width: 80%;margin:5% 10%;"/><a class="btn">长按识别上方图片，保存到手机分享朋友圈</a>');
					})
				}
			},
		});
		app.init();
	</script>

</html>